<template>
  <!-- 申请更改结算方式 -->
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible2"
    width="600px">
    <el-form :model="form" size="mini" label-width="130px" :rules="rules" ref="form">
      <el-form-item label="合同号：">
        <span>{{ info.orderSn }}</span>
      </el-form-item>
      <el-form-item label="客户名称：">
        <span>{{ info.customerName }}</span>
      </el-form-item>
      <el-form-item label="合同数量：">
        <span>{{ info.orderGoodsNumber }}</span>
      </el-form-item>
      <el-form-item label="合同金额：">
        <span>{{ info.orderAmount }}</span>
      </el-form-item>
      <el-form-item label="原结算方式：">
        <div>{{ info.transactionType|fifPayTypes }}</div>
        <div>{{ info.orderRemark }}</div>
      </el-form-item>
      <div v-if="this.info.isCanCheck==2">
        <el-form-item label="支付方式：" prop="payType">
          <el-radio-group v-model="form.payType" @input="changePayTypes(form.payType)">
            <el-radio
              v-for="(item,index) in paymentTypeLists"
              :key="index"
              :label="item.code"
              style="margin-bottom: 10px;"
              >{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付摘要：">
          <div style="padding:16px 10px 10px 20px;border: 1px solid #ccc;border-radius:10px;" v-if="form.payType">
            <!-- 款到发货 -->
            <div v-if="form.payType=='BANK_PAY'">
              <el-form-item prop="paymentItemCode">
                <el-radio-group v-model="form.paymentItemCode" @input="changePaymentCode">
                  <el-radio
                    v-for="(item,index) in choosePaytypeObj.itemList"
                    :key="index"
                    :label="item.paymentItemCode"
                    style="margin-bottom:10px;display: block"
                    >{{ item.paymentItemName }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form.paymentItemCode=='BANK_PAY_Item3'">
                <div>
                  <span> <span style="color: red;">*</span> 支付定金</span>
                  <span style="color: red;">(不低于全款的20%)</span>
                </div>
                <el-form-item style="margin-bottom: 10px;" prop="paymentDeposit">
                  <el-input type="number" v-model="form.paymentDeposit" clearable style="width: 150px;"></el-input> 元
                </el-form-item>
                <div>
                  <span> <span style="color: red;">*</span> 货款最晚付清日期</span>
                  <span style="color: red;">(不得超过30天)</span>
                </div>
                <el-form-item style="margin-bottom: 10px;" prop="paymentDate">
                  <el-date-picker
                    style="width: 150px;"
                    :picker-options="pickerOptions2"
                    v-model="form.paymentDate"
                    value-format="yyyy年MM月dd日"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </div>

              <!--分批支付-->
              <div v-if="form.paymentItemCode=='BANK_PAY_Item4'">
                合同签订当日支付定金（<span style="color:Red">不低于全款的20%</span>）
                <el-form-item style="margin-bottom: 10px;display: inline-block" prop="paymentDeposit">
                  <el-input type="number" v-model="form.paymentDeposit" clearable style="width: 100px" @change="countperDeposit"></el-input>
                </el-form-item> 元，付完一车，发一车，定金用于最后一车的货款抵扣。
                合同最晚付款时间
                <el-form-item style="margin-bottom: 10px;display: inline-block" prop="paymentDate">
                  <el-date-picker
                    style="width: 150px;"
                    :picker-options="pickerOptions2"
                    v-model="form.paymentDate"
                    value-format="yyyy年MM月dd日"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>

              </div>

            </div>
            <!-- 货到付款 货到票到付款 -->
            <div v-if="form.payType=='COD_PAY'||form.payType=='COD_PAY2'">
              <div>
                <span>合同当日支付定金</span>
                <span
                  v-if="(form.payType=='COD_PAY'&&form.paymentItemCode!='COD_PAY_Item2')||(form.payType=='COD_PAY2'&&form.paymentItemCode!='COD_PAY2_Item2')"
                  style="color: red;">
                  (不低于全款的5%)
                </span>
              </div>
              <el-form-item style="margin-bottom: 12px;" prop="paymentDeposit">
                <el-input type="number" v-model="form.paymentDeposit" clearable style="width: 150px;"></el-input> 元
              </el-form-item>
              <el-form-item prop="paymentItemCode">
                <el-radio-group v-model="form.paymentItemCode" @input="changePaymentCode">
                  <div v-for="(item,index) in choosePaytypeObj.itemList" :key="index" style="margin-bottom: 10px;">
                    <el-radio :label="item.paymentItemCode">{{ item.paymentItemName }}</el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
              <!-- 有账期 -->
              <div v-if="form.paymentItemCode=='COD_PAY_Item2'||form.paymentItemCode=='COD_PAY2_Item2'">
                <div> <span style="color: red;">*</span> 客户账期(天)</div>
                <el-form-item style="margin-bottom: 10px;" prop="paymentDayNum">
                  <el-input type="number" v-model="form.paymentDayNum" clearable style="width: 150px;"></el-input>
                </el-form-item>
                <div> <span style="color: red;">*</span> 账期利息(元/吨/天)<span style="padding-left:5px;color:red">合同单价*0.0003</span></div>
                <el-form-item style="margin-bottom: 10px;" prop="paymentInterest">
                  <el-input type="number" v-model="form.paymentInterest" clearable style="width: 150px;"></el-input>
                </el-form-item>
              </div>
              <div> <span style="color: red;">*</span> 货款最晚付清日期</div>
              <el-form-item style="margin-bottom: 10px;" prop="paymentDate">
                <el-date-picker
                  style="width: 150px;"
                  v-model="form.paymentDate"
                  :picker-options="pickerOptions1"
                  value-format="yyyy年MM月dd日"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <!-- 摩塑白条 -->
            <div v-if="form.payType=='XISHANG_PAY'">
              <div> <span style="color: red;">*</span> 需方向锡商银行贷款(元)</div>
              <el-form-item style="margin-bottom: 10px;" prop="paymentAmount">
                <el-input type="number" v-model="form.paymentAmount" clearable style="width: 150px;"></el-input>
              </el-form-item>
              <div> <span style="color: red;">*</span> 贷款期限(天)</div>
              <el-form-item style="margin-bottom: 10px;" prop="paymentDayNum">
                <el-input type="number" v-model="form.paymentDayNum" clearable style="width: 150px;"></el-input>
              </el-form-item>
              <div style="color: #ff6501;">贷款利率根据企业实际批准利率,款到发货,贷款自合同签订日起当日付清</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label-width="150px"
          v-if="form.payType=='COD_PAY'||form.payType=='COD_PAY2'||form.payType=='XISHANG_PAY'"
          label="客户是否有未清款项："
          prop="isArrears">
          <el-radio-group v-model="form.isArrears" @input="changeArrears">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isArrears==1" label="未清款项说明：" prop="arrearsRemark">
          <el-input v-model="form.arrearsRemark" clearable placeholder="请填写未清款项说明"></el-input>
        </el-form-item>
        <el-form-item v-if="form.isArrears==1" label="客户信誉：" prop="reputation">
          <el-input v-model="form.reputation" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input style="width:90%;" v-model="form.remark" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </div>
      <div v-if="info.isCanCheck == 1">
        <el-form-item label="申请结算方式：">
          <div>{{ info.payType|fifPayTypes }}</div>
          <div>{{ info.newOrderRemark }}</div>
        </el-form-item>
        <el-form-item label="备注：">
          <div>{{ info.newRemark }}</div>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose2">取 消</el-button>
      <el-button type="primary" v-if="this.info.isCanCheck==2" @click="handleConfirm2" :loading="btnLoading2">确认申请</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updateOrderRemarkAPI } from '@/api/purchase.js';
import { paymentTypeListAPI } from '@/api/allInLine/inquiry';
import { mapGetters } from 'vuex';
const defaultForm = {
  orderId: "",  //订单id
  payType: "",//结算方式
  isArrears: "",//客户是否有未清款项
  arrearsRemark: "",//未清款项说明
  reputation:"",//客户信誉
  remark: "", //备注
  paymentItemCode: '',//支付摘要判断码
  paymentDeposit: '',//支付定金
  paymentDate: '',//贷款日期
  paymentDayNum: '',//客户账期 贷款期限
  paymentInterest:'',//账期利息
  paymentAmount:'',//锡商银行贷款金额

  carNum:'',//车
  perDeposit:'',//每车的价格
  balance:'',//发货的余款
};
export default {
  name: "updateSettlement",
  data() {
    const validateGoodsNum = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('不能小于0'))
      }
      callback()
    };
    const validatePrice = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('不能小于0元'))
      }
      callback()
    };
    const validatebalance = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('需大于0'))
      }
      callback()
    };
    const validatepaymentDeposit =  (rule, value, callback) => {
      if (value <= 0 && this.form.paymentItemCode=='BANK_PAY_Item4') {
        callback(new Error('需大于0'))
      }else if(value < 0){
        callback(new Error('不能小于0元'))
      }
      callback()
    };
    return {
      dialogVisible2: false,
      title2: '',
      btnLoading2: false,
      form: JSON.parse(JSON.stringify(defaultForm)),
      title: '',
      info: {},
      paymentTypeLists: [], //结算方式列表
      choosePaytypeObj: {},
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptions2: {
        disabledDate(time) {
          const currentDate = Date.now() - 8.64e7; // 当前日期
          const thirtyDaysLater = new Date();
          thirtyDaysLater.setDate(thirtyDaysLater.getDate() + 30); // 当前日期后30天
          return time.getTime() < currentDate || time.getTime() > thirtyDaysLater.getTime();
        }
      },
      rules: {
        isArrears: [
          { required: true, message: '请选择客户是否有未结清款项', trigger: 'change' },
        ],
        arrearsRemark: [
          { required: true, message: '请输入客户未结清款项说明', trigger: 'blur' },
        ],
        reputation: [
          { required: true, message: '请输入客户信誉', trigger: 'blur' },
        ],
        payType: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
        paymentItemCode: [
          { required: true, message: "请选择支付摘要", trigger: "change" },
        ],
        paymentDeposit: [
          { required: true, message: "请输入支付定金", trigger: "blur" },
          {validator:validatepaymentDeposit,trigger: "blur"}
        ],
        carNum: [
          { required: true, message: "此项必填", trigger: "change" },
        ],
        balance: [
          { required: true, message: "此项必填", trigger: "blur" },
          {validator:validatebalance,trigger: "blur"}
        ],
        paymentDate: [
          { required: true, message: "请选择货款最晚付清日期", trigger: "change" },
        ],
        paymentDayNum: [
          { required: true, message: "请输入该选项", trigger: "blur" },
          {validator:validateGoodsNum,trigger: "blur"}
        ],
        paymentInterest: [
          { required: true, message: "请输入账期利息", trigger: "blur" },
          {validator:validatePrice,trigger: "blur"}
        ],
        paymentAmount: [
          { required: true, message: "请输入向锡商银行贷款金额", trigger: "blur" },
          {validator:validatePrice,trigger: "blur"}
        ],
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components: {
  },
  created() {
  },
  filters: {
    fifPayTypes(val) {
      if (val == 'BANK_PAY') {
        return '款到发货'
      } else if (val == 'COD_PAY') {
        return '货到付款'
      } else if (val == 'COD_PAY2') {
        return '货到票到付款'
      } else if (val == 'HONOUR_PAY') {
        return '承兑结算'
      } else if (val == 'XISHANG_PAY') {
        return '摩塑白条'
      } else {
        return val
      }
    },
  },
  methods: {
    countperDeposit(){
      if(this.form.paymentDeposit && this.form.carNum ){
        this.form.perDeposit = Number((this.form.paymentDeposit/this.form.carNum).toFixed(2))
      }
    },
    changeArrears() {
      this.form.arrearsRemark = '';
      this.form.reputation = '';
    },
    //变更结算方式
    changePayTypes(payType) {
      this.form.isArrears = "";
      this.form.arrearsRemark = "";
      this.form.reputation = "";
      this.form.paymentItemCode = '';
      this.form.paymentDeposit = '';
      this.form.paymentDate = '';
      this.form.paymentDayNum = '';
      this.form.paymentAmount = '';
      this.form.paymentInterest = '';
      this.form.carNum = '';
      this.form.perDeposit = '';
      this.form.balance = '';
      this.choosePaytypeObj = this.paymentTypeLists.find(res => res.code == payType);
      if (payType=='XISHANG_PAY') {
        this.form.paymentItemCode = 'XISHANG_PAY_Item1';
      }
    },
    changePaymentCode() {
      if (this.form.payType == 'BANK_PAY') {
        this.form.paymentDeposit = '';
        this.form.paymentDate = '';
        this.form.carNum = '';
        this.form.perDeposit = '';
        this.form.balance = '';
      } else if (this.form.payType=='COD_PAY'||this.form.payType=='COD_PAY2') {
        this.form.paymentDayNum = '';
        this.form.paymentInterest = '';
      }
    },

    getPaymentTypeList() {
      paymentTypeListAPI().then((res) => {
        this.paymentTypeLists = res;
      });
    },

    //显示
    showPop(type, item) {
      this.dialogVisible2 = true;
      this.info = item;
      this.getPaymentTypeList()
      if (type == 'see') {
        this.title = '申请详情'
      } else if (type == 'check') {
        this.title = '申请更改结算方式'
        this.form = JSON.parse(JSON.stringify(defaultForm));
        this.form.orderId = item.orderId
      }
    },
    //关闭弹窗
    handleClose2() {
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交
    handleConfirm2() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          delete data.carNum
          delete data.balance
          updateOrderRemarkAPI(data).then((res) => {
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('upload');
          }).catch(() => {
            this.btnLoading2 = false;
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
